import Banner from 'vite-plugin-banner'
import { defineConfig } from 'vite'
const path = require('path')
const bannerText = require('./build/banner')
const { getInputHtml } = require('./build/get-html')

const ServerPort = 3000

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const rootPage = './src/'
  const outDirDist = '../dist'
  const input = getInputHtml()
  return {
    root: rootPage,
    publicDir: path.resolve(__dirname, 'public'), // 默认是 root,需要配置一下
    resolve: {
      alias: { // 别名
        '@': path.resolve(__dirname, 'src'),
      },
      // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
    },
    plugins: [
      Banner(bannerText), // 注释插件
      // PluginTagsTransform(mode), // 更改html 插件
    ],
    build: {
      outDir: outDirDist, // 输出路径
      assetsDir: 'public', // 静态文件目录
      // 默认情况下 若 outDir 在 root 目录下， 则 Vite 会在构建时清空该目录。
      emptyOutDir: true,
      rollupOptions: {
        input,
        output: { // 更改静态文件 目录+文件名
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        }
      }
    },
    server: {
      port: ServerPort,
      cors: true, // 跨域
    }
  }
})

// ------------
// ------------
// ------------
// ------------
// ------------
// ------------
// 插件，提供 在 html -> head -> 插入 script
const PluginTagsTransform = function(mode) {
  if (mode !== 'production') { // 测试环境的html -> 不添加 script标签
    return null
  }

  return {
    name: 'body-prepend-transform',
    transformIndexHtml() {
      return [
        {
          tag: 'script',
          attrs: { type: 'text/javascript', charset: 'utf-8', src: '/v/hm.js' },
        }
      ]
    }
  }
}